<template>
  <div class="image-wrapper" :class="size" @click="go">
    <img :src="src" class="image" />
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance } from "vue";

import defAva from "@/assets/images/default.jpg";
import router from "@/router";

const props = defineProps({
  size: {
    type: String,
    default: "default",
  },
  to: String,
});

const proxy = getCurrentInstance();
const src = computed(() => proxy?.attrs.src || defAva);
const size = computed(() => props.size);

function go() {
  if (props.to) {
    router.push(props.to);
  }
}
</script>

<style scoped>
.image-wrapper {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.default {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
}

.large {
  width: 5rem;
  height: 5rem;
  min-width: 5rem;
  min-height: 5rem;
}

.small {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
}

.mini {
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  min-height: 1.2rem;
}
.image {
  width: 100%;
  height: 100%;
  /* border-radius: 50%; */
}
</style>
